.container {
  background-color: #f3f3f6;
  .bg-color {
    width: 100%;
    height: 227rpx;
    background: linear-gradient(to bottom, RGBA(234, 246, 255, 1), RGBA(255, 255, 255, 1));
    border-radius: 0rpx 0rpx 0rpx 0rpx;
    position: absolute;
    top: 0;
    left: 0;
  }

  // 地址包裹
  .address-wrapper {
    width: 702rpx;
    margin: 0 auto;
    background:
      url("/static/mt-li/bg-x.png") no-repeat,
      linear-gradient(180deg, #007aff 0%, #ffffff 100%);
    background-size: cover;
    position: relative;
    z-index: 1;
    background-position: center;
    border-radius: 18rpx;
    overflow: hidden;
    padding: 0 24rpx;
    box-shadow: 0rpx 4rpx 10rpx 0rpx rgba(0, 122, 255, 0.08);

    .top-section {
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding-top: 23rpx;
      padding-bottom: 16rpx;
      .address {
        font-weight: 600;
        font-size: 30rpx;
        color: #ffffff;
      }
      .change-address {
        height: 44rpx;
        background: #f4f9ff;
        border-radius: 22rpx;
        display: flex;
        align-items: center;
        justify-content: center;
        font-weight: 400;
        font-size: 22rpx;
        color: #007aff;
        padding: 0 16rpx;
      }
    }

    .address-squire {
      position: relative;
      padding-bottom: 8rpx;
      .address {
        width: 100%;
        height: 110rpx;
        background: #fbfbfb;
        border-radius: 20rpx;
        display: flex;
        align-items: center;
        padding: 24rpx;
        margin-bottom: 16rpx;
        &:last-child {
          margin-bottom: 0;
        }
        .img-icon {
          width: 62rpx;
          height: 62rpx;
          background: #007aff;
          border-radius: 8rpx 8rpx 8rpx 8rpx;
          display: flex;
          align-items: center;
          justify-content: center;
          image {
            width: 40rpx;
            height: 40rpx;
          }
          margin-right: 12rpx;
          &.black {
            background-color: rgba(38, 39, 40, 1);
          }
        }
        .name {
          font-size: 24rpx;
          color: #606366;
          line-height: 1.2;
        }
        .addres-desc {
          font-weight: 400;
          font-size: 30rpx;
          color: #262728;
          overflow: hidden;
          text-overflow: ellipsis;
          white-space: nowrap;
          width: 450rpx;
        }
      }
      .circle-wrapper {
        width: 80rpx;
        height: 80rpx;
        background: RGBA(148, 199, 255, 1);
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        position: absolute;
        top: 80rpx;
        right: 40rpx;
        image {
          width: 64rpx;
          height: 64rpx;
        }
      }
    }
    .address-base {
      display: flex;
      align-items: center;
      margin-bottom: 14rpx;
      .person-base {
        display: flex;
        align-items: center;
        &:first-child {
          margin-right: 48rpx;
        }
        image {
          width: 36rpx;
          height: 36rpx;
          margin-right: 8rpx;
          position: relative;
          top: 4rpx;
        }
        text {
          font-weight: 500;
          font-size: 26rpx;
          color: #ffffff;
          line-height: 1.2;
        }
      }
    }
  }
  // 滚动
  .scroll-confirm {
    flex: 1;
    overflow: hidden;
    // 付款订单编号
    .good-wrapper {
      padding: 24rpx;
      margin: 0 24rpx;
      border-radius: 12rpx;
      margin-top: 16rpx;
      background-color: #fefeff;
      .dt {
        font-weight: 400;
        font-size: 26rpx;
        color: #262728;
        line-height: 30rpx;
        padding: 24rpx 0;
        padding-top: 0;
      }
      .goods-lists {
        .good-w {
          margin-bottom: 36rpx;
          &:last-child {
            margin-bottom: 0;
          }
          .good {
            display: flex;
            align-items: center;
            margin-bottom: 20rpx;
            &:last-child {
              margin-bottom: 0;
            }
            .img {
              width: 258rpx;
              height: 172rpx;
              border-radius: 24rpx;
              margin-right: 16rpx;
              position: relative;
              overflow: hidden;
              .tag {
                padding: 0 20rpx;
                height: 35rpx;
                background: linear-gradient(180deg, #4badfd 0%, #2b61eb 100%);
                border-radius: 0rpx 24rpx 0rpx 24rpx;
                display: flex;
                align-items: center;
                justify-content: center;
                font-weight: 400;
                font-size: 18rpx;
                color: #ffffff;
                position: absolute;
                bottom: 0;
                left: 0;
              }
              image {
                width: 100%;
                height: 100%;
              }
            }
            .desc-w {
              flex: 1;
              display: flex;
              flex-direction: column;
              justify-content: space-between;
              height: 172rpx;
              .name-w {
                display: flex;
                align-items: baseline;
                .name {
                  font-weight: 500;
                  font-size: 28rpx;
                  color: #262728;
                  line-height: 38rpx;
                  flex: 1;
                  margin-right: 20rpx;
                }
                .num {
                  font-weight: 400;
                  font-size: 22rpx;
                  color: #262728;
                }
              }
              .attr {
                font-weight: 400;
                font-size: 24rpx;
                color: #606366;
                overflow: hidden;
                text-overflow: ellipsis;
                white-space: nowrap;
                width: 360rpx;
              }
              .price {
                font-weight: 600;
                font-size: 40rpx;
                color: #ff6a00;
                text {
                  font-weight: 500;
                  font-size: 22rpx;
                  color: #ff6a00;
                }
              }
            }
          }
          .good-pejian {
            display: flex;
            align-items: center;
            justify-content: space-between;
            .item-good {
              .ti {
                font-weight: 300;
                font-size: 24rpx;
                color: #606366;
                margin-bottom: 8rpx;
                line-height: 28rpx;
              }
              .jian {
                font-weight: 500;
                font-size: 26rpx;
                color: #262728;
                line-height: 30rpx;
              }
            }
          }
        }
      }
    }

    // 发货方式
    .method-send {
      height: 87rpx;
      background: #ffffff;
      border-radius: 12rpx 12rpx 12rpx 12rpx;
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 0 24rpx;
      margin: 0 24rpx;
      margin-top: 16rpx;
      .ti {
        font-weight: 400;
        font-size: 28rpx;
        color: #262728;
      }
      image {
        width: 20rpx;
        height: 40rpx;
      }
    }

    // 银行账户
    .bank-wrapper {
      margin: 0 24rpx;
      padding: 0 24rpx;
      padding-top: 24rpx;
      padding-bottom: 16rpx;
      background-color: #fff;
      margin-top: 16rpx;
      border-radius: 12rpx;
      // 总价
      .total-price {
        display: flex;
        align-items: center;
        justify-content: space-between;
        margin-bottom: 8rpx;
        .ti {
          font-weight: 400;
          font-size: 28rpx;
          color: #262728;
          text {
            font-size: 20rpx;
            font-weight: 400;
            color: #262728;
          }
        }
        .price {
          font-weight: 600;
          font-size: 40rpx;
          color: #ff6a00;
          text {
            font-weight: 500;
            font-size: 22rpx;
            color: #ff6a00;
          }
        }
      }
      .title {
        font-weight: 400;
        font-size: 28rpx;
        color: #262728;
        margin-bottom: 19rpx;
      }
      .bank {
        display: flex;
        align-items: center;
        & > image {
          width: 100%;
          height: 200rpx;
          border-radius: 12rpx;
          margin-right: 17rpx;
        }
        .desc-bank {
          flex: 1;
          height: 200rpx;
          position: relative;
          .name-desc {
            font-weight: 400;
            font-size: 28rpx;
            color: #262728;
          }
          .bank-num {
            display: flex;
            align-items: center;
            .num {
              font-weight: 400;
              font-size: 28rpx;
              color: #262728;
              margin-right: 12rpx;
            }
            image {
              width: 35rpx;
              height: 35rpx;
            }
          }
          .upload-pay {
            display: flex;
            align-items: center;
            justify-content: flex-end;
            font-weight: 400;
            font-size: 24rpx;
            color: #007aff;
            position: absolute;
            bottom: 0;
            right: 0;
            image {
              width: 20rpx;
              height: 40rpx;
              margin-left: 8rpx;
            }
          }
        }
      }
    }
  }

  // 上传凭证
  .btn-w {
    padding: 24rpx;
    padding-bottom: env(safe-area-inset-bottom);
    width: 100%;
    .btn {
      height: 100rpx;
      background: linear-gradient(180deg, #4badfd 0%, #2b61eb 100%);
      border-radius: 18rpx 18rpx 18rpx 18rpx;
      display: flex;
      align-items: center;
      justify-content: center;
      font-weight: 400;
      font-size: 28rpx;
      color: #ffffff;
      margin-bottom: 24rpx;
    }
  }
}

// 发货方式弹层
.custom-popup {
  ::v-deep .u-drawer-bottom {
    background: linear-gradient(360deg, #ffffff 0%, #e7f2ff 100%);
  }
  .pop-wrapper {
    .title {
      font-weight: 500;
      font-size: 34rpx;
      color: #262728;
      text-align: center;
      margin-top: 40rpx;
      margin-bottom: 20rpx;
    }
    // 运费
    .forient-fu {
      display: flex;
      align-items: center;
      justify-content: space-between;
      height: 90rpx;
      margin: 0 24rpx;
      padding: 0 24rpx;
      margin-bottom: 24rpx;
      box-shadow: 0rpx 2rpx 10rpx 0rpx rgba(0, 0, 0, 0.06);
      background-color: #fff;
      border-radius: 12rpx;
      .ti {
        font-weight: 400;
        font-size: 26rpx;
        color: #262728;
        flex: 1;
      }
      image {
        width: 90rpx;
        height: 48rpx;
      }
    }

    // 代运输服务
    .yunshu-service {
      margin: 0 24rpx;
      background: #ffffff;
      box-shadow: 0rpx 2rpx 10rpx 0rpx rgba(0, 0, 0, 0.06);
      border-radius: 24rpx 24rpx 24rpx 24rpx;
      padding: 0 24rpx;
      margin-bottom: 24rpx;
      border-radius: 12rpx;

      .yunshu-title {
        padding: 24rpx 0;
        display: flex;
        align-items: center;
        justify-content: space-between;

        .ti {
          font-weight: 400;
          font-size: 26rpx;
          color: #262728;
        }
        image {
          width: 90rpx;
          height: 48rpx;
        }
      }

      // liebao
      .container-w {
        padding-bottom: 40rpx;
        .lists {
          display: flex;
          flex-wrap: wrap;
          align-items: center;
          justify-content: space-between;
          .list {
            width: 315rpx;
            height: 130rpx;
            background: #ffffff;
            border-radius: 24rpx 24rpx 24rpx 24rpx;
            border: 1rpx solid #ededed;
            display: flex;
            align-items: center;
            justify-content: center;
            margin-bottom: 24rpx;
            position: relative;
            &.active {
              border-color: #007aff;
              background: #f4f9ff;
              color: #007aff;
              .optioned {
                width: 67rpx;
                height: 43rpx;
                background: #007aff;
                border-radius: 20rpx 0rpx 20rpx 0rpx;
                display: flex;
                align-items: center;
                justify-content: center;
                color: #fff;
                font-size: 18rpx;
                position: absolute;
                right: 0;
                bottom: 0;
                image {
                  width: 34rpx;
                  height: 34rpx;
                }
              }
            }
          }
        }
        .price-desc-compu {
          .left-desc {
            flex: 1;
            .h1 {
              font-weight: 400;
              font-size: 24rpx;
              color: #262728;
              line-height: 1.5em;
            }
          }
          .prce-w {
            display: flex;
            align-items: center;
            justify-content: space-between;
            .fee {
              font-weight: 400;
              font-size: 22rpx;
              color: #606366;
              line-height: 1.5em;
              flex: 1;
            }
            .price {
              font-weight: 600;
              font-size: 40rpx;
              color: #ff6a00;
              text {
                font-weight: 500;
                font-size: 22rpx;
                color: #ff6a00;
              }
            }
          }
        }
      }
    }
    // 上传凭证
    .btn-w {
      padding: 24rpx;
      padding-bottom: calc(24rpx + env(safe-area-inset-bottom));
      padding-top: 0;
      .btn {
        height: 100rpx;
        background: linear-gradient(180deg, #4badfd 0%, #2b61eb 100%);
        border-radius: 18rpx 18rpx 18rpx 18rpx;
        display: flex;
        align-items: center;
        justify-content: center;
        font-weight: 400;
        font-size: 28rpx;
        color: #ffffff;
      }
    }
  }
}

// 请上传支付凭证
.custom-popup-pay {
  ::v-deep .u-drawer-bottom {
    background: linear-gradient(360deg, #ffffff 0%, #e7f2ff 100%);
  }
  .pingzheng-wrapper {
    .title {
      padding: 40rpx 0;
      font-weight: 500;
      font-size: 34rpx;
      color: #262728;
      text-align: center;
    }
    .pre-box {
      .pre-item-image {
        width: 560rpx;
        height: 259rpx;
        border-radius: 12rpx;
      }
    }

    .add-wrapper {
      width: 560rpx;
      height: 259rpx;
      background: #ffffff;
      border-radius: 12rpx 12rpx 12rpx 12rpx;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      margin: 0 auto;
      image {
        width: 100rpx;
        height: 100rpx;
        margin-bottom: 26rpx;
      }
      .txt {
        font-weight: 500;
        font-size: 26rpx;
        color: #007aff;
      }
      .desc {
        font-weight: 400;
        font-size: 22rpx;
        color: #606366;
      }
    }
    .btn-w {
      padding: 0 24rpx;
      padding-bottom: calc(24rpx + env(safe-area-inset-bottom));
      margin-top: 59rpx;
      .btn {
        height: 100rpx;
        background: linear-gradient(180deg, #4badfd 0%, #2b61eb 100%);
        border-radius: 18rpx 18rpx 18rpx 18rpx;
        display: flex;
        align-items: center;
        justify-content: center;
        font-weight: 400;
        font-size: 28rpx;
        color: #ffffff;
      }
      .pay-desc {
        font-weight: 300;
        font-size: 20rpx;
        color: #606366;
        margin-top: 16rpx;
      }
    }
    .upload-wrapper {
      display: flex;
      justify-content: center;
    }
  }
}
